<!DOCTYPE html>
<html>
  <head>
    <title>Create A Form</title>
    <link type="text/css" rel="stylesheet" href="/css/app.css"/>
    <script type="text/javascript" src="/js/prototype.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
  </head>

  <body>
    <div id="instructions">
      <h1>Instructions:</h1>
      <p>To create a form:</p>
      <ol>
        <li>give it a name</li>
        <li>designate and name one or more sections</li>
        <li>designate and name one or more questions per section</li>
      </ol>
    </div>

    <div id="form-metadata">
      <p>form title:<input name='form-title' size="25"/></p>
    </div>

    <div class="form-section">
      <div class="section-metadata">
        <p>section title<input name="section_title" size="25"/></p>
      </div>

      <div class="form-question">
        <table>
          <tr>
            <th>question:</th>
            <td><input name="question-text_" size="25"/></td>
          </tr>
          <tr>
            <th>question type:</th>
            <td>
              <select name="question-type_">
                <option value="short-text">short text</option>
                <option value="long-text">long text</option>
                <option value="select">select</option>
                <option value="radio">radio</option>
                <option value="checkbox">checkbox</option>
              </select>
            </td>
          </tr>

          <tr class="possible-answers">
            <th>possible answers:</th>
            <td>
              <div class="possible-answer">
                <input name="possible-answer_" size="25"/>
                <button class="add-possible-answer">+</button>
                <button class="remove-possible-answer">-</button>
              </div>
            </td>
          </tr>
        </table>
        <p><button class="remove-question">remove question</button></p>

        <table class="add-remove-question">
          <tbody>  
            <tr>
              <td><button class="remove-question">-</button></td>
              <td><button class="add-question">+</button></td>
            </tr>
          </tbody>
        </table>

      </div>
                                                                        
      <table class="add-remove-section">
        <tbody>  
          <tr>
            <td><button class="remove-section">-</button></td>
            <td><button class="add-section">+</button></td>
          </tr>
        </tbody>
      </table>
    </div>

  </body>
</html>
